<template>
    <div>
        <el-container>
            <el-badge value="正在泡妞子" class="item" id="tututu"></el-badge>
            <img src="../src/assets/5.jpg" id="iamgs" />
            <el-header>张淑达的电商后台</el-header>
            <p id="users">{{ userson.username }}</p>
            <p class="outlogin" @click="out">退出登录</p>
            <el-container>
                <el-aside width="200px">
                    <el-container class="layout-container-demo">
                        <el-aside width="200px">
                            <el-scrollbar>
                                <el-menu
                                    :default-openeds="['1', '3']"
                                    :unique-opened="true"
                                    :router="true"
                                >
                                    <el-sub-menu
                                        :index="item.path"
                                        v-for="(item, index) in meundata.meuntodo"
                                    >
                                        <template #title>
                                            <span>{{ item.authName }}</span>
                                        </template>
                                        <el-menu-item-group>
                                            <el-menu-item
                                                :index="val.path"
                                                v-for="(val, key) in item.children"
                                            >{{ val.authName }}</el-menu-item>
                                        </el-menu-item-group>
                                    </el-sub-menu>
                                </el-menu>
                            </el-scrollbar>
                        </el-aside>
                    </el-container>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
//导入axios封装
import { requert } from '../requert/index'
//导入store的 状态文件
import { useMainStore } from '../store/index'
//导入elements
import { ElMessage } from 'element-plus';
//导入路由
import { useRouter } from 'vue-router';
//获取状态的实例对象
const mainStore = useMainStore()
//实例化路由，才能用
const routers = useRouter()

//取用户名
const userson = reactive({
    username: JSON.parse(localStorage.getItem('userfoin')).username,
})

//定义变量接收后端的侧边栏数据
const meundata = reactive({
    meuntodo: []
})

//退出登录
const out = function () {
    ElMessage({
        message: '退出成功了，宝贝',
        type: 'success',
    })
    localStorage.removeItem('userfoin')
    routers.push({ path: '/login' })
}

//页面加载获取后端数据保存到定义的变量里面
onMounted(async () => {
    let { data } = await requert.get('/menus');
    console.log(data.data);
    //判断成功的状态
    if (data.meta.status == 200) {
        meundata.meuntodo = data.data
    } else {
        ElMessage({
            message: '你脑子被驴踢了',
            type: 'warning',
        })
    }
})


</script>

<style>
.outlogin {
    position: absolute;
    right: 10px;
    top: 70px;
    background: pink;
}
#users {
    position: absolute;
    right: 20px;
    top: 20px;
}
* {
    margin: 0px;
    padding: 0px;
}
#tututu {
    position: absolute;
    left: 145px;
}
#iamgs {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 100px;
    top: 5px;
    border-radius: 30px;
}
.el-header {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    /* width: 800px; */
    height: 830px;
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    line-height: 200px;
}
.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    line-height: 160px;
}
</style>